/**
 * @description 公共头部
 * @user zengxiaohui
 * @date 2020/1/2
 */
<template>
    <header class="flexR publicHead">
        <div class="flexR">
            <div class="flexC">您好！欢迎来到群岛新区公共招聘网--舟山市人力资源市场唯一官网</div>
            <ul class="flexR">
                <li class="flexR">
                    <i></i>
                    <span>个人登录</span>
                    <span style="margin: 0 5px;"> / </span>
                    <span>注册</span>
                </li>
                <li class="flexR">
                    <i></i>
                    <span>企业登录</span>
                    <span style="margin: 0 5px;"> / </span>
                    <span>注册</span>
                </li>
                <li class="flexR">
<!--                    <a href="" class="flexR">-->
                        <i></i>
                        <span>手机访问</span>
                        <div>
                            <img style="width:100px;height:100px;margin:0;" src="../../assets/home/appewm.png" alt="">
                        </div>
<!--                    </a>-->
                </li>
            </ul>
        </div>
    </header>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style lang="less">
    .publicHead{
        background-color:#f9f9f9;
        border-bottom:1px solid #ccc;
        height: 40px;
        font-size: 14px;
        justify-content: center;
        &>div{
            justify-content: space-between;
            width: 1200px;
            &>ul{
                justify-content: flex-end;
                flex-grow: 1;
                &>li{
                    padding: 0 5px;
                    cursor: pointer;
                    i{
                        width: 26px;
                        height: 26px;
                        background: #f3a215 url(../../assets/home/index_per_icon01.png)no-repeat 5px 5px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }

                }
                &>li:nth-child(2){
                    i{
                        width: 26px;
                        height: 26px;
                        background: #3689e2 url(../../assets/home/index_com_icon.png)no-repeat 4px 4px;
                        border-radius: 50%;
                        background-size: 18px 14px;
                    }
                }
                &>li:nth-child(3){
                    /*a{*/
                        position: relative;
                        i{
                            background: url(../../assets/home/109.png) no-repeat 0px -24px;
                            height: 24px;
                            width: 20px;
                            margin-right: 0;
                        }
                        div{
                            background-color: #fff;
                            position: absolute;
                            display: none;
                            top: 32px;
                            left: -12px;
                            width: 102px;
                            height: 102px;
                            text-align: center;
                            z-index: 2;
                            border: 1px solid #ebebeb;
                        }
                        &:hover div{display: block;}
                    /*}*/
                }
            }
        }
    }
</style>